<template>
  <div>
    <!--  订单管理 团长->详细-->
    <div class="tod-top">
      <div style="font-size:18px">订单信息</div>
      <div style="font-size:18px">收货信息</div>
    </div>
   <div class="tod-mid">
    <el-form style="margin-left: 90px" :model="ruleForm" class="left">
      <el-form-item label="订单状态：">
        {{ruleForm.StateStr}}
      </el-form-item>
      <el-form-item label="订单单号：">
        {{ruleForm.AllOrderNumber}}
      </el-form-item>
      <el-form-item label="下单时间：">
        {{ruleForm.CreateTime}}
      </el-form-item>
    </el-form>
    <el-form style="margin-left: 90px" class="right" :model="ruleForm">
      <el-form-item label="收货人：">
        {{ruleForm.ReceivingName}}
      </el-form-item>
      <el-form-item label="收货人手机号：">
        {{ruleForm.ReceivingPhoneNumber}}
      </el-form-item>
      <el-form-item label="收货地址：">
        {{ruleForm.ReceivingAddress}}
      </el-form-item>
      <el-form-item label="分销团长：">--
        <!-- {{ruleForm.ReceivingPhoneNumber}} -->
      </el-form-item>
    </el-form>
    </div>
    <p style="font-size: 18px; margin: 20px 0 10px">订单商品</p>
    <div class="table-style">
      <el-table :data="tableData">
        <el-table-column  label="商品">
          <template slot-scope="scope">
            <div class="flexbox">
              <el-image style="margin-left:10px;width:50px;height:50px" :src="scope.row.ProductPhoto"></el-image>
           <p>{{scope.row.ProductName}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ProductModelStr" label="规格"></el-table-column>
        <el-table-column prop="PayProductPrice" label="单价/数量"></el-table-column>
        <el-table-column  label="商品佣金比例/金额">-</el-table-column>
        <el-table-column  label="总价">-</el-table-column>
      </el-table>
      <botpage
        class="botpage-style"
        :currentPage="currentPage"
        :PageSize="PageSize"
        :total="total"
        @handleCurrentChange="currentChange"
        @handleSizeChange="pageSizeChange"
      />
    </div>
       <el-button style="margin:10px 0 0 50%" type="info" @click="goback">返回</el-button>
  </div>
</template>

<script>
import { LoadOrderProduct } from "@/request/api";
import Botpage from "@/components/botpage/Botpage";
export default {
  data() {
    return {
      ruleForm:{},
      tableData:[],
      currentPage:1,
      PageSize:10,
      total:1,
    }
  },
  mounted(){
    this.getInfo()
    this.getTableInfo()
  },
  methods:{
    getInfo(){
      let that= this;
      that.ruleForm = this.$route.query.detail;
      // that.tableData = this. $route.query.detail.OrderProductsList;
      that.AllOrderNumber = this.$route.query.AllOrderNumber
console.log(that.ruleForm)
      console.log(that.AllOrderNumber)
    },
    getTableInfo() {
      LoadOrderProduct({
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        OtherValues: this.AllOrderNumber,
      })
        .then((res) => {
          if (res.StatusCode === 200) {
            this.tableData = res.Data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goback() {
      this.$router.back();
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableInfo();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableInfo();
    },
  },
   components: {
    Botpage,
  },
};
</script>

<style lang="less" scoped>
.tod-top {
  display: flex;
  margin-bottom: 10px;
  div {
    flex: 1;
    font-size: 18px;
  }
}
.tod-mid {
  background-color: #fff;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  .left,
  .right {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    // margin-left: 90px;
    p {
      margin-bottom: 10px;
    }
  }
}
.flexbox {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  p{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 5px;
  }
}
</style>